<template>
  <div class="app-page">
    <div class="app-page-toolbar">
      <div class="app-page-toolbar__filter">
        <el-input v-model="list.filter.search" placeholder="请输入内容" />
        <el-select v-model="list.filter.notify_status">
          <el-option label="全部" :value="-1" />
          <el-option label="已变红包" :value="true" />
          <el-option label="未变红包" :value="false" />
        </el-select>
        <div style="display: flex;">
          <el-button type="primary" @click="listGet">查询</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </div>
      </div>
      <div class="app-page-toolbar__action">
        <el-button type="primary" @click="handleCreate">新增问题</el-button>
      </div>
    </div>
    <div class="app-page-table">
      <el-table v-loading="list.loading" :data="list.data" border style="width: 100%" height="100%" show-overflow-tooltip>
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="quesion_id" label="ID" width="120">
          <template #default="{ row }">
            <a-link :link="`https://www.zhihu.com/question/${row.quesion_id}`">
              #{{ row.quesion_id }}
            </a-link>
          </template>
        </el-table-column>
        <el-table-column prop="question_title" label="标题" min-width="250" />
        <el-table-column prop="question_author_name" label="作者" min-width="200">
          <template #default="{ row }">
            <user-avatar :avatar="row.question_author_avatar" :name="row.question_author_name"></user-avatar>
          </template>
        </el-table-column>
        <el-table-column label="通知状态" min-width="100" align="center">
          <template #default="{ row }">
            <el-tag
              effect="dark"
              :type="row.notify_status ? 'danger' : 'warning'">
              {{ row.notify_status ? '已变红包' : '未变红包' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="question_red_money" label="红包金额" width="100" align="center" />
        <el-table-column prop="question_red_count" label="红包数量" width="100" align="center" />
        <!-- <el-table-column prop="question_created" label="发布时间" width="170" align="center">
          <template #default="{ row }">
            {{ useFormatTime(row.question_created) }}
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="question_updated" label="修改时间" width="170" align="center">
          <template #default="{ row }">
            {{ useFormatTime(row.question_updated) }}
          </template>
        </el-table-column> -->
        <el-table-column prop="createdAt" label="收录时间" width="100" align="center">
          <template #default="{ row }">
            {{ useTimeFromNow(row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column prop="updatedAt" label="通知时间" width="100" align="center">
          <template #default="{ row }">
            {{ row.notify_time ? useTimeFromNow(new Date(row.notify_time)) : '-'  }}
          </template>
        </el-table-column>
        <el-table-column prop="updatedAt" label="更新时间" width="140" align="center">
          <template #default="{ row }">
            {{ useTimeFromNow(row.updatedAt) }}
          </template>
        </el-table-column>
        <el-table-column prop="updatedAt" label="执行时刻" width="120" align="center">
          <template #default="{ row }">
            {{ row.status ? useFormatTime(row.updatedAt, 'ss') + '秒' : '-' }}
          </template>
        </el-table-column>
        <el-table-column label="定时任务" min-width="100" align="center">
          <template #default="{ row }">
            <el-tag
              effect="dark"
              :type="row.status ? 'success' : 'info'">
              {{ row.status ? '已开启' : '未开启' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="210" align="center"  fixed="right">
          <template #default="{ row }">
            <el-tooltip placement="top" content="上移">
              <el-button type="info" size="small" @click="handleSort(row, 'up')" :icon="ArrowUp" />
            </el-tooltip>
            <el-tooltip placement="top" :content="row.status ? '关闭任务' : '开启任务'">
              <el-button type="primary" size="small" @click="handleToggle(row)" :icon="row.status ? TurnOff : Open" />
            </el-tooltip>
            <el-tooltip placement="top" content="删除">
              <el-button type="danger" size="small" @click="handleDelete(row)" :icon="Delete" />
            </el-tooltip>
            <el-tooltip placement="top" content="下移">
              <el-button type="info" size="small" @click="handleSort(row, 'down')" :icon="ArrowDown" />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="app-page-pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :page-size="list.size"
        :current-page="list.page"
        :total="list.total"
        @current-change="handlePageChange"/>
    </div>
  </div>
</template>
<script lang="ts" setup>
import userAvatar from '@/components/user-avatar.vue';
import aLink from '@/components/a-link.vue';
import { reactive } from 'vue';
import { ElMessageBox } from 'element-plus';
import type { QuestionInter } from '@/typings/interface';
import http from '@/utils/http'
import { useConfirm, useMessage, useTimeFromNow, useFormatTime } from '@/utils/utils'
import { ArrowUp, ArrowDown, Delete, Open, TurnOff } from '@element-plus/icons-vue'

const list = reactive({
  page: 1,
  size: 10,
  total: 0,
  loading: true,
  filter: {
    search: '',
    notify_status: -1
  },
  data: []
})

// 请求列表
function listGet () {
  list.loading = true
  const filter = JSON.parse(JSON.stringify(list.filter))
  if (filter.notify_status === -1) {
    delete filter.notify_status
  }
  http('/question/list', {
    page: list.page,
    size: list.size,
    ...filter
  }).then((res: any) => {
    const { total, items } = res.data
    list.total = total
    list.data = items
    list.loading = false
  })
}
listGet()
// 重置搜索
function resetFilter () {
  list.filter.search = ''
  list.filter.notify_status = -1
  listGet()
}
// 页码改变回调
function handlePageChange (value: number) {
  list.page = value
  listGet()
}
// 创建
function handleCreate () {
  ElMessageBox.prompt('请输入知乎问题id', '新增问题', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPlaceholder: '请输入问题id'
  }).then(({ value }) => {
    http('/question/create', {
      quesion_id: value
    }).then(res => {
      useMessage('创建成功')
      listGet()
    })
  }).catch(() => {

  })
}
// 切换任务状态
function handleToggle (row: QuestionInter) {
  http('/question/toggleSchedule', {
    id: row.id
  }).then(res => {
    listGet()
  })
}
// 删除
function handleDelete (row: QuestionInter) {
  useConfirm('确定删除该条记录吗?').then(() => {
    http('/question/delete', {
      id: row.id
    }).then(res => {
      useMessage('删除成功')
      listGet()
    })
  })
}
// 排序
function handleSort (row: QuestionInter, direction: 'up' | 'down') {
  http('/question/sort', {
    id: row.id,
    direction
  }).then(res => {
    listGet()
  })
}
</script>
<style lang="scss">
</style>